<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect } from 'vue'
import iconFd from '../../assets/img/放大白.png'
import iconSx from '../../assets/img/缩小白.png'
import iconDw from '../../assets/img/定位白.png'
import iconFull from '../../assets/img/全屏幕白.png'
import Config from '../module/Class_Map.js'
import iconCj from '../../assets/img/ceju.png'
import iconCm from '../../assets/img/cemian.png'
import iconQc from '../../assets/img/qingchu.png'
import * as turf from '@turf/turf'
import { isMeasure } from '../../stores/chun.js'

onMounted(() => {
    // 添加到Config.ToolLayers中
    nextTick(() => {

        Config.mapObj.map?.on('pm:create', (e) => {
            isMeasure.value = false
            if (e.shape == "Polygon") {
                Config.ToolLayers.addLayer(e.layer)
                const polygonGeoJSON = e.layer.toGeoJSON();
                const area = turf.area(polygonGeoJSON);
                e.layer.bindPopup(`面积为：${(area / 1000000).toFixed(2)}平方千米`).openPopup();
            } else if (e.shape == "Line") {
                Config.ToolLayers.addLayer(e.layer)
                const lineGeoJSON = e.layer.toGeoJSON();
                const length = turf.length(lineGeoJSON);
                e.layer.bindPopup(`距离为：${(length).toFixed(2)}公里`).openPopup();
            }
        })
    })
})
const toolsData = reactive({
    tools: [
        { title: '测距', icon: iconCj, isShow: false },
        { title: '测面', icon: iconCm, isShow: false },
        { title: '清除', icon: iconQc, isShow: false },
        { title: '放大', icon: iconFd, isShow: false },
        { title: '缩小', icon: iconSx, isShow: false },
        { title: '定位', icon: iconDw, isShow: false },
        { title: '全屏', icon: iconFull, isShow: false },
    ]
})

const handleTool = (item) => {
    switch (item.title) {
        case '放大':
            Config.mapObj.map.setZoom(Config.mapObj.map.getZoom() + 1)
            break
        case '缩小':
            Config.mapObj.map.setZoom(Config.mapObj.map.getZoom() - 1)
            break
        case '定位':
            Config.mapObj.map.setView([30.245361, 120.962109], 10)
            break
        case '全屏':
            break
        case '测距':
            isMeasure.value = true
            Config.mapObj.map.pm.enableDraw('Line', {
                snappable: true,
                snapDistance: 20,
                finishOn: 'dblclick',
                allowSelfIntersection: false,
                tooltips: true,
                templineStyle: {
                    color: 'red',
                    dashArray: '5, 5',
                    pane: 'drawingPane' 
                },
                hintlineStyle: {
                    color: 'red',
                    dashArray: '5, 5',
                    pane: 'drawingPane'
                },
                pathOptions: {
                    color: 'red',
                    fillColor: 'red',
                    fillOpacity: 0.4,
                    opacity: 1,
                    weight: 2,
                    clickable: true,
                    pane: 'drawingPane'
                },
            })

            break
        case '测面':
            isMeasure.value = true
            Config.mapObj.map.pm.enableDraw('Polygon', {
                snappable: true,
                snapDistance: 20,
                finishOn: 'dblclick',
                allowSelfIntersection: false,
                tooltips: true,
                templineStyle: {
                    color: 'red',
                    dashArray: '5, 5',
                    pane: 'drawingPane'
                },
                hintlineStyle: {
                    color: 'red',
                    dashArray: '5, 5',
                    pane: 'drawingPane'
                },
                pathOptions: {
                    color: 'red',
                    fillColor: 'red',
                    fillOpacity: 0.4,
                    opacity: 1,
                    weight: 2,
                    clickable: true,
                    pane: 'drawingPane'
                },
            })

            break
        case '清除':
            let allLayers = Config.ToolLayers
            allLayers.clearLayers()
            isMeasure.value = false
            break
    }
}
</script>

<template>
    <div class="tools">
        <div v-for="(item, index) in toolsData.tools" :key="index" class="tool_item" @mouseover="item.isShow = true"
            @mouseleave="item.isShow = false" @click="handleTool(item)">
            <img :src="item.icon" alt="icon" />
            <Transition name="fade">
                <div class="tool_item_title" v-if="item.isShow">
                    {{ item.title }}
                </div>
            </Transition>
        </div>
    </div>
</template>

<style lang="less" scoped>
.tools {
    position: fixed;
    right: 10px;
    bottom: 15px;
    height: 25px;
    width: 320px;
    border-radius: 12px;
    color: #fff3e1;
    // background-color: #404040c7;
    background-color: #3466C5;
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    // border: 1px solid #b0afaf;
    z-index: 999;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tool_item {
        img {
            width: 14px;
            height: 14px;
        }

        cursor: pointer;

        .tool_item_title {
            position: absolute;
            bottom: 30px;
            left: -10px;
            // 文字不换行
            white-space: nowrap;
            background-color: #3c3c3c;
            padding: 0px 5px;
            border-radius: 5px;
            font-size: 14px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
        }
    }
}
</style>